<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Translation</title>
</head>
<body>

<h1>Upload Image for Translation</h1>

<form action="#" th:action="@{/image/translate}" method="post" enctype="multipart/form-data">
    <label for="image">Select Image:</label>
    <input type="file" id="image" name="image" required>
    <br><br>

    <label for="language">Target Language:</label>
    <input type="text" id="language" name="language" required placeholder="e.g., en, fr, es">
    <br><br>

    <button type="submit">Translate</button>
</form>

<div th:if="${message}">
    <h2>Response:</h2>
    <pre th:text="${message}"></pre>
</div>

</body>
</html>